<template>
  <div class="roles">
    <!--<div class="title">
      <label>待选择</label>
      <label>已选择</label>
    </div>-->
    <el-transfer v-model="value"
                 :data="dataList"
                 :filterable="true"
                 :props="transferProps"
                 @change="handleChange"
                 :titles="titles">
      <div class="role" slot-scope="{ option }">
        <label>{{ option.nickName }}</label>
      </div>
    </el-transfer>
  </div>
</template>

<script>

export default {
  name: 'assignUsers',
  props: {
    dataList: {
      type: Array,
      default: () => ([])
    },
    value: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      transferProps: {
        key: 'id',
        label: 'userName'
      },
      titles: ['全选', '全选']
    }
  },
  methods: {
    handleChange (key, direction, ids) {
      this.$emit('handleSetTransfer', { direction, ids })
    }
  }
}
</script>

<style lang="scss" scoped>
  .roles {
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 90px 20px;
      color: #333;
      label{
        width: 140px;
      }
    }
    ::v-deep .el-transfer-panel__body{
      height: auto;
      min-height: calc(100vh - 198px);
      .el-transfer-panel__list.is-filterable{
        height: calc(100vh - 240px);
      }
    }
    .role{
      display: flex;
      justify-content: flex-start;
      label, span{
        flex: 1;
      }
    }
    .el-transfer {
      align-items: center;

      ::v-deep .el-transfer-panel{
        width: calc(50% - 150px);
        border: 2px solid #dcdcdc;
      }

      ::v-deep .el-button {
        &.is-disabled {
          border: none;
        }
      }
    }
  }
</style>
